<template>
	<view class="header">
		<u-sticky :offset-top="stickyHeight" :h5-nav-height="hHeight" bg-color="#F6F6F6">

			<view :class="['type', listShow ? 'type-show' : 'type-hide']" @touchstart="clickType()"></view>
			<!-- <view class="status_bar" style="background-color: #FBD220;"></view> -->
			<!-- 头部 -->
			<view style="position: relative;">
				<view class="search">
					<view class="contentType" @click="Show">
						<view class="type1">
							<view class="def" v-text="value"></view>
						</view>
						<view class="xl">
							<u-icon name="arrow-down-fill" :size="24" color="#FBD220"></u-icon>
						</view>
					</view>

					<input @focus="onfocusStatus" @input='changes' confirm-type="search" @confirm="onSearch($event)"
						v-model="text" type="text" placeholder="搜索品牌/车型/配件/店铺" />
				</view>

				<!-- 下拉框 -->
				<view @click="clickType">
					<view :class="['content-list', listShow ? 'content-list-down' : '']">
						<view>
							<u-icon name="arrow-up-fill" color="#FFFFFF" size="28"
								style="position: absolute;top: -20rpx;left: 40rpx;"></u-icon>
						</view>
						<view v-for="(item,index) in select" :key="item.id" @click.stop="choice(item.name)">
							{{item.name}}</view>
					</view>
				</view>
			</view>




			<view class="content">
				<view class="card" v-show='isHistoryShow'>
					<view class="content">
						<view class="title">
							<text>历史搜索</text>
							<view @tap="del">
								<i-icon icon="iconshanchu" size="30rpx" color="rgb(177,179,181)" class="icon"></i-icon>
							</view>
						</view>
						<view class="info">
							<view style="text-align: center;margin-bottom: 30rpx;color: rgb(177,179,181);"
								v-show="searchValue==''">
								----暂无搜索历史----
							</view>
							<view v-for="(item,index) in searchValue" :key="index" @click="storageList(item)"
								class="searchStorge">
								<text class="storageList">{{item}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="item">
					<view class="margin-hide"></view>
					<!-- <view :class="[tabTop ? 'margin-show' : 'margin-hide']"></view> -->
					<view v-show="value==='车源'">
						<view class="item-content">
							<car-source-filter @change="filterCarListChange"></car-source-filter>
						</view>
					</view>
					<!-- 美护宝 -->
					<view class="item-content" v-show="value==='车品'">
						<view>
							<car-goods-filter @change="filterCarGoodsListChange" :category-list="carGoodsCategoryList">
							</car-goods-filter>
						</view>

					</view>
					<!-- 店铺 -->
					<view class="item-content" v-show="value==='店铺'">
						<storeFilter @change="filterStoreListChange"></storeFilter>
						<!-- <u-dropdown ref="storeuDropdown" active-color='#FBB000'>
							<u-dropdown-item title="地区">
								<regiog @close="closePopupSection" @change="regionChange"></regiog>
							</u-dropdown-item>
							<u-dropdown-item title="筛选" :options="Car" @change='selecStore' v-model="selecStoreValue">
							
							</u-dropdown-item>
						</u-dropdown> -->
					</view>
					<!-- 寻车 -->
					<view class="item-content" v-show="value==='寻车'">
						<find-car @change="filterFindCarListChange"></find-car>
						<!-- <u-loadmore :status="status" bg-color="#F6F6F6"/> -->
					</view>
					<!-- 配件 -->
					<view class="item-content" v-show="value==='配件'">
						<accessory @change="accessoryFilterListChange"></accessory>
					</view>
				</view>
			</view>
		</u-sticky>
		<!-- </view> -->
		<page-loading :show='pageLoading'>
			<view class="content">

				<view class="item">
					<!-- 车源 -->

					<!-- 列表数据 -->
					<view class="item-list" v-show="value==='店铺'">
						<storeList :selectStore='selectStore'></storeList>
						<u-loadmore @loadmore="storeMore" :status="status" v-show="selectStore.length !== 0" />
					</view>
					<view class="item-list" v-show="value==='车品'">
						<beautyCard :carList='coodList'></beautyCard>
						<u-loadmore @loadmore="coodMore" :status="status" v-show="coodList.length !== 0" />
					</view>
					<view class="item-list" v-show="value==='车源'">
						<view class="car-card">
							<view class="car-card-content" v-for="(item,index) in selectCarList"
								@click="goCar(item.carId)" :key='item.carId'>
								<!-- 图片 -->
								<view class="img-content">
									<view class="img">
										<!-- <image :src="item.carImg" mode=""></image> -->
										<u-lazy-load :image="item.carImg+'!idx'"></u-lazy-load>
									</view>
								</view>
								<!-- 内容，标题价格 -->
								<view class="text-content">
									<view class="title">
										<text
											style="font-weight: bold;margin-right: 10rpx;">{{item.car_Type_Name}}</text>
										<text>{{item.configuration_Name}}</text>
									</view>
									<view class="sale-price">
										￥{{item.carPrice}}
									</view>
									<view class="price">
										指导价：{{item.carFactoryPrice}}/{{item.carCutPrice}}
									</view>
								</view>
							</view>
						</view>
						<view class="defaultMap" v-if="!selectCarList.length">
							<image src="/static/img/images/tu.png" mode=""></image>
							<view class="texna">
								暂无更多信息，看看其他的吧
							</view>
						</view>
						<u-loadmore @loadmore="careMore" :status="status" bg-color="#F6F6F6"
							v-show="selectCarList.length" />
					</view>
					<view class="item-list" v-show="value==='寻车'">
						<carSourceCard :carList="newCarList"></carSourceCard>
						<view class="defaultMap" v-if="newCarList.length===0">
							<image src="/static/img/images/tu.png" mode=""></image>
							<view class="texna">
								暂无更多信息，看看其他的吧
							</view>
						</view>
						<u-loadmore @loadmore="newCarMore" :status="status" v-show="newCarList.length" />
					</view>
					<view class="item-list" v-show="value==='配件'">
						<find-pj v-for="(item,index) in pjList" :key="index" :info="item"></find-pj>
						<view class="defaultMap" v-if="pjList.length===0">
							<image src="/static/img/images/tu.png" mode=""></image>
							<view class="texna">
								暂无更多信息，看看其他的吧
							</view>
						</view>
						<u-loadmore @loadmore="pjMore" :status="status" v-show="pjList.length !== 0" />
					</view>
				</view>
			</view>
		</page-loading>
	</view>
</template>

<script src="./search.js"></script>

<style lang="scss" scoped>
	@import './search.scss';
</style>
